<template>
    <div class="table_component">
      <Table
        :columns="columnsTable"
        :data="dataTable"
        border
        :row-class-name="rowClassNameTable"
        :loading="loadingTable"
         @on-row-click="onRowClickTable"
        :height="heightTable"
        :size="sizeTable"
      >
      </Table>
      <div class="table_page_component" v-if="isShowPage">
        <Page
          :total="totalPage"
          :current="pageIndex"
          :page-size="pageSize"
          :page-size-opts="pageSizeOpts"
          @on-page-size-change="changePageSizeFun"
          @on-change="changePageFun"
          show-sizer
          show-total
        />
      </div>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {};
    },
    props: {
    /** 是否显示分页 */
      isShowPage: {
        type: Boolean,
        default: true,
      },
    /** 总条数 */
      totalPage: {
        type: Number,
        default: 0,
      },
    /** 页数 */
      pageIndex: {
        type: Number,
        default: 1,
      },
    /** 条数 */
      pageSize: {
        type: Number,
        default: 10,
      },
    /** 表格高度 */
      heightTable: Number,
    /** 表格尺寸 */
      sizeTable: {
        type: String,
        default: "default",
      },
    /** 分页跳数参数 */
      pageSizeOpts: {
        type: Array,
        default: () => {
          return [10, 20, 30, 60, 100];
        },
      },
      /** 是否显示表格加载 */
      loadingTable: {
        type: Boolean,
        default: false,
      },
      /** 表头数据 */
      columnsTable: {
        type: Array,
        default: () => {
          return [];
        },
      },
      /** 表格数据 */
      dataTable: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    methods: {
      init() {},
      /** 改变单页条数事件 */
      changePageSizeFun(val) {
        this.$emit("changePageSizeTable", val);
      },
      /** 页面改变事件 */
      changePageFun(val) {
        this.$emit("changePageTable", val);
      },
      rowClassNameTable(row, index) {
        console.log(row, index);
      },
      onRowClickTable(row, index) {
        console.log(row, index);
      },
    },
    created() {
      this.init();
    },
    watch: {},
  };
  </script>
  <style lang="less"></style>
  

